.layout-container {
    height: 100%;
    color: var(--text-color);
    // theme
    background-color: var(--bg);

    .content-container-horizontal {
        position: relative;
        display: flex;
        min-height: 14em;

        .content-inner-left-container {
            flex: none;
            // position: relative;
            width: 50%;
            padding-right: 10px;

            .hover-cursor {
                cursor: e-resize;

                position: absolute;
                top: 0;
                right: 0;

                width: 10px;
                height: 100%;

                background: gray;
            }
        }

        .content-inner-right-container {
            flex: 1;
            width: 50%;
            // position: relative;
        }
    }

    .content-container-vertical {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 14em;

        .content-inner-left-container {
            flex: none;
            // position: relative;
            height: 50%;
            padding-bottom: 10px;

            .hover-cursor {
                cursor: n-resize;

                position: absolute;
                bottom: 0;
                left: 0;

                width: 100%;
                height: 10px;

                background: gray;
            }
        }

        .content-inner-right-container {
            flex: 1;
            height: 50%;
        }
    }

    .main-content {
        background: var(--bg);
    }

    .outer-right-container {
        // position: relative;
        flex: 0 0 280px;

        > div {
            position: absolute;
            width: 100%;
        }
    }
}
